<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>番茄钟计时器</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>番茄钟计时器</h1>
    <div class="timer-display">00:00</div>
    
    <div class="controls">
      <button class="btn" data-time="15">15分钟</button>
      <button class="btn" data-time="30">30分钟</button>
      <button class="btn" data-time="60">60分钟</button>
    </div>
    
    <div class="custom-time">
      <input type="number" id="custom-time" placeholder="输入自定义时间（分钟）">
      <button id="start-btn">开始</button>
    </div>
    
    <div class="timer-controls">
      <button id="fast-forward">20倍速</button>
      <button id="pause-btn">暂停</button>
      <button id="resume-btn">继续</button>
    </div>
    
    <div class="medals">
      <h2>🎖️ 勋章墙 🎖️</h2>
      <div class="medal-grid">
        <!-- 30个勋章占位符 -->
        <div class="medal">1</div>
        <div class="medal">2</div>
        <div class="medal">3</div>
        <div class="medal">4</div>
        <div class="medal">5</div>
        <div class="medal">6</div>
        <div class="medal">7</div>
        <div class="medal">8</div>
        <div class="medal">9</div>
        <div class="medal">10</div>
        <div class="medal">11</div>
        <div class="medal">12</div>
        <div class="medal">13</div>
        <div class="medal">14</div>
        <div class="medal">15</div>
        <div class="medal">16</div>
        <div class="medal">17</div>
        <div class="medal">18</div>
        <div class="medal">19</div>
        <div class="medal">20</div>
        <div class="medal">21</div>
        <div class="medal">22</div>
        <div class="medal">23</div>
        <div class="medal">24</div>
        <div class="medal">25</div>
        <div class="medal">26</div>
        <div class="medal">27</div>
        <div class="medal">28</div>
        <div class="medal">29</div>
        <div class="medal">30</div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
